<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{counter}}</h2>
    <button @click="counter++">++</button>
    <button @click="counter--">--</button>

    <h3>------------直接修改vuex的state(不推荐,无法跟踪)--------------</h3>
    <button @click="$store.state.counter++">++</button>
    <button @click="$store.state.counter--">--</button>

    <h3>---------------------通过mutation修改vuex的state----------------</h3>
    <button @click="addition">++</button>
    <button @click="subtraction">--</button>

    <h3>------------------通过mutation携带参数------------------</h3>
    <h4>携带1个数值参数</h4>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <h4>携带一个对象参数,可以传递多个参数</h4>
    <button @click="addStudent">添加一个学生</button>
    <h4>这里的参数称为mutations的payload(负载)</h4>
    
    <h3>------------------通过mutation提交风格------------------</h3>
    <button @click="addCount2(5)">+5</button>
    
    <h3>------------------通过mutation响应式------------------</h3>
    <button @click="update">更新Vuex中的info对象</button>
    <button @click="del">删除Vuex中的info对象</button>
    <!-- 不是响应式的 -->

    <h3>------------------通过action修改异步操作------------------</h3>
    <button @click="update2">用mutation异步更新Vuex中的info对象,devtool检测不到变化</button>
    <button @click="update3">用action异步更新Vuex中的info对象</button>
    <button @click="update4">用action异步更新Vuex中的info对象,并使用回调函数</button>


    <h3>-------------module的使用------------</h3>
    <h4>{{$store.state.a.name}}</h4>
    <button @click="updateName">修改module的名字</button>
    <h4>{{$store.getters.fullname}}</h4>
    <h4>{{$store.getters.fullname2}}</h4>
    <h4>{{$store.getters.fullname3}}</h4>
    <button @click="asyncUpdateName">异步修改module的名字</button>

    <h3>-------------getter属性----------------</h3>
    <h2>counter的平方:{{$store.getters.powerCounter}}</h2>
    <h2>年龄大于20的学生:{{$store.getters.more20Stu}}</h2>
    <h2>年龄大于20的学生的人数:{{$store.getters.more20StuLen}}</h2>
    <h2>年龄大于21的学生的人数:{{$store.getters.moreAgeStu(21)}}</h2>
    <hello-vuex :counter="counter"></hello-vuex>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex'
import {
  INCREMENT
} from './store/mutations-types'

export default {
  name: 'App',
  data(){
    return {
      message: '我是app组件',
      counter: 0
    }
  },
  components: {
    HelloVuex
  },
  methods:{
    addition(){
      this.$store.commit(INCREMENT)
    },
    subtraction(){
      this.$store.commit('decrement')
    },
    addCount(count){
      this.$store.commit('incrementCount',count)
    },
    addStudent(){
      const stu = {id:114,name:'lionlee',age: 18}
      this.$store.commit('addStu',stu)
    },
    // mutations提交另一种提交风格
    addCount2(count){
      // 传入一个对象
      this.$store.commit({
        type: 'incrementCount2',
        count
      })
    },
    update(){
       this.$store.commit('updateInfo')
    },
    del(){
      this.$store.commit('deleteInfo')
    },
    update2(){
       this.$store.commit('updateInfo2')
    },
    update3(){
      // 传递参数
      //  this.$store.dispatch('aUpdateInfo',"我是payload")
      // 传递回调函数
      //  this.$store.dispatch('aUpdateInfo',()=>{
      //    console.log('完成操作');
      //  })
      //  传递多个参数,用对象
      this.$store.dispatch('aUpdateInfo',{
        message: '我是携带的信息',
        success: ()=>{
          console.log('完成操作啦');
        }
      })
    },
    update4(){
      this.$store
      .dispatch('bUpdateInfo',"我是携带的信息")
      .then(res=>{
        console.log('完成了提交');
        console.log(res);
      })
    },
    updateName(){
       this.$store.commit('updateName','lion')
    },
    asyncUpdateName(){
      this.$store.dispatch('aUpdateName')
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
